<template>
    <div class="viewNews">
        <!-- 标题 -->
        <h3>{{this.newsinfo.title}}</h3>
        <p>
            <span> 发表时间: {{newsinfo.add_time | dataFormat}} </span>
            <span> 点击: {{newsinfo.click}} 次</span>
        </p>
        <hr>
        <!-- 内容 -->
        <div class="content" v-html="newsinfo.content"></div>

        <!-- 评论区 -->
        <comment :newid="id"></comment>
    </div>
</template>

<script>
import comment from '../sub-components/Comment.vue'
export default {
    data(){
        return {
            newsinfo: {}
        }
    },
    created() {
        this.getNewsInfo()
    },
    methods: {
        async getNewsInfo(){
            const {data} = await this.$http.get("/api/getnew/" + this.id)
            if(data.status === 0) 
            // console.log(data);
            return (this.newsinfo = data.message[0])
        }
    },
    props: ["id"],
    components: {
        comment
    }
}
</script>

<style lang="scss" scoped>
    .viewNews{
        padding: 3px;
        h3{
            color: red;
            font-size: 15px;
            text-align: center;
            padding-top: 10px;
        }
        p{
            color: #26a2ff;
            display: flex;
            justify-content: space-between;
            padding-top: 8px;
            font-size: 13px;
        }
        .content{
            letter-spacing: 2px;
            line-height: 2;
            // padding-bottom: 50px;
        }
    }
</style>